<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
>
 <h:head>
 </h:head>
 	<f:view>
    <h:body>
	    <ui:composition>
			<div id="aside-chat">
				<h:form id='myForm'>
			   	   <h:commandButton value="Actualiser Chat" class='connected-users-refresh-command'>
			   		 <f:ajax execute="@form" render="panel-output" />
			   	   </h:commandButton>
			   	   <h:panelGroup id='panel-output'>
			   	   		<h4>Utilisateurs connectés</h4>
			   	   		<p>
			   	   			<h:outputText id="output" value="#{ConnectedUsersBean.connectedUsersString}" escape="false" />	
			   			</p>
			   		</h:panelGroup>
			   	</h:form>
			   	<div id="chat-panel">
			   		<ui:repeat var="cur" value="#{ConnectedUsersBean.connectedUsers}">
			   			<div class='chat-window' pid='#{cur.usrId}'>
			   				<div class='chat-window-header'> 
			   					<h:outputText value='#{cur.usrFirstname} #{cur.usrLastname}'></h:outputText>
			   				</div>
			   				<div id='message-content' class='chat-window-content'>
			   					<h:form class='duplicate-form'>
		   							<h:outputText style="top:30px; position:absolute; height:110px; overflow-y:auto; overflow-x:hidden; bottom: 30px; width:200px; word-wrap: break-word;" id='messages' escape="false" value="#{ConnectedUsersBean.listMessagesString}">  </h:outputText>
		   							<h:commandButton rendered="true" actionListener='#{ConnectedUsersBean.refreshMessages}' class='refresh-command'> 
		   								<f:param name='receiverid' value="#{cur.usrId}"></f:param>
		   								<f:ajax execute="@form" render="messages" />
		   							</h:commandButton>
		   						</h:form>
		   						<h:form class='original-form'>
		   							<h:panelGroup id='form-panel' class='chat-window-content-controls'>
		   								<h:commandButton value='Go' actionListener='#{ConnectedUsersBean.sendMessage}' class="chat-sent-btn"> 
		   									<f:param name='receiverid' value="#{cur.usrId}"></f:param>
		   									<f:ajax render="form-panel" execute="@form" />
		   								</h:commandButton>
		   								<h:inputText id='input-text-message' value="#{ConnectedUsersBean.newMessage}" binding="#{ConnectedUsersBean.newMessageInput}" autocomplete="off"></h:inputText>
		   							</h:panelGroup>
		   						</h:form>
			   				</div>
			   			</div>
			   		</ui:repeat>
			   	</div>			   	
			   	<script>
			   	
				 	// Vidage du champ texte de saisie
			   		emptyInput = function () {
			   			$("input-text-#{cur.usrId}").val('');
			   		};
			   		
			   		// Fonction permettant de masquer une fenêtre de chat
			   		hideChatWindow = function (window) {
			   			// Si c'est la fenêtre parente
			   			// On récupère le header
			   			if($(window).hasClass('chat-window'))
			   				window = $(window).children('.chat-window-header');
			   			$(window).next().height(0);
		   				$(window).next().hide();
		   				$(window).width(200);
		   				$(window).css('position', 'absolute');
		   				$(window).css('bottom', '0px');
		   				$(window).find('.refresh-command').each(function() {
		   					$(this).removeClass('chat-active');
		   				});
			   		};
			   		
			   		// Fonction permettant d'fficher une fenêtre de chat
			   		showChatWindow = function (window) {
			   			// Si c'est la fenêtre parente
			   			// On récupère le header
			   			if($(window).hasClass('chat-window'))
			   				window = $(window).children('.chat-window-header');
			   			$(window).parent().show();
		   				$(window).next().height(200);
		   				$(window).next().show();
		   				$(window).css('position', 'relative');
		   				$(window).css('bottom', '');
		   				$(window).find('.refresh-command').each(function() {
		   					$(this).addClass('chat-active');
		   				});
			   		};
			   		
			   		// Fonction appellée au chargement de la page
			   		$(document).ready(function() {
			   			$('.chat-window').hide();
			   			$('.refresh-command').hide();
			   			$('.connected-users-refresh-command').hide();
			   			
			   			setInterval(function(){
			   				$('.refresh-command').each(function () {
			   					if($(this).hasClass("chat-active")) {
			   						var haveFocus = $(this).is(":focus");
			   						$(this).click();
			   						if(haveFocus == true)
			   							$(this).focus();
			   					}
			   				});
			   			},2000);
			   			setInterval(function(){
			   				$('.connected-users-refresh-command').each(function () {
			   					$(this).click();
			   					setTimeout(chatElementClickRegister, 500);
			   				});
			   			},5000);
			   			
			   		});

			   		// Abonnement au clic sur l'élément de chat
			   		chatElementClickRegister = function () {
				   		$('.chat-element').click(chatElementClickAction);
			   		};
			   		chatElementClickAction = function() {
			   			var id = $(this).attr('pid');
			   			var firstname = $(this).attr('pfname');
			   			var lastname = $(this).attr('plname');
			   			var chatWindow = $('.chat-window[pid="' + id + '"]');
			   			
			   			// Si la fenêtre de chat n'est pas visible, on l'affiche
			   			if(!chatWindow.children('.chat-window-content').is(":visible")){
				   			$(chatWindow).find('.refresh-command').each(function() {
			   					$(this).addClass('chat-active');
			   					
			   				});
				   			// Traitement du placement de la fenêtre
				   			chatWindowsCount = 0;
				   			$('.chat-window').each(function() {
				   				if($(this).children('.chat-window-content').is(":visible"))
				   					chatWindowsCount++;
				   			});
				   			if(chatWindowsCount > 0)
				   				$(chatWindow).css('margin-left', (chatWindowsCount * 210).toString() + 'px');
				   			showChatWindow(chatWindow);
			   			}
			   			else {
			   				// Si elle est visible, on la masque
			   				hideChatWindow(chatWindow);
			   			}
			   		};
			   		chatElementClickRegister();
			   		
			   		// Abonnement au clic sur l'en-tête d'une fenêtre de chat
			   		$('.chat-window-header').click(function () {
			   			if($(this).next().height() > 0) {
			   				hideChatWindow($(this));
			   			}
			   			else {
			   				showChatWindow($(this));
			   			}	
			   		});
			   	</script>
			</div>
		</ui:composition>
	</h:body>
	</f:view>
</html>